<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>07_state_demo</title>
</head>
<body>
  <div>
    <h2>Simple TODO List</h2>
    <input type="text">
    <button>Add #4</button>
    <ul>
      <li>吃饭</li>
      <li>睡觉</li>
      <li>打豆豆</li>
    </ul>
  </div>
  <hr>

  <div id="example">在此实现页面效果和功能</div>

  <script src="../js/react.js"></script>
  <script src="../js/react-dom.js"></script>
  <script src="../js/babel.min.js"></script>
  <script type="text/babel">
    /*
    功能: 组件化实现此功能
      1. 界面显示如上所示
      2. 输入文本, 点击按钮显示到下面列表的首位, 并清除输入的文本
     */
    /*
    分解组件:
      列表: TodoList
        props: todos
      应用: App
        state: todos, inputTodo
     */
    /*
    问题: 完善功能
      1). 如果没有输入或输入的只是空格, 不添加到列表
      2). 如果输入的文本两边有空格, 去掉空格后添加
    */

    class TodoList extends React.Component {

      render () {
        return (
          <ul>
            {
              this.props.todos.map((todo, index) => {
                return <li key={index}>{todo}</li>;
              })
            }
          </ul>
        );
      }
    }

    class App extends React.Component {
      constructor (props) {
        super(props);
        this.state = {
          todos: ['吃饭', '睡觉', '打豆豆'],
          inputTodo: ''
        };
        this.changeInput = this.changeInput.bind(this);
        this.addTodo = this.addTodo.bind(this);
      }

      changeInput(event) {
        this.setState({
          inputTodo: event.target.value
        })
      }

      addTodo() {
        let inputTodo = this.state.inputTodo.trim();
        if(!inputTodo) {
          this.setState({ inputTodo: '' });
          return;
        }

        let todos = this.state.todos;
        todos.unshift(inputTodo);
        inputTodo = '';
        this.setState({ todos, inputTodo });
      }

      render () {
        return (
          <div>
            <h2>Simple TODO List</h2>
            <input type="text" onChange={this.changeInput} value={this.state.inputTodo}/>
            <button onClick={this.addTodo}>Add #{this.state.todos.length+1}</button>
            <TodoList todos={this.state.todos}/>
          </div>
        )
      }
    }

    ReactDOM.render(<App/>, document.getElementById('example'))
  </script>
</body>
</html>

